<template>
    <div class="lovefplist" id="lovefplist">
        <div class="lovefplist_fiexd">
            <div class="commodity_img">
                <img v-if="fptext.specialImage" style="min-height:2.2rem" :src="imgUrl+fptext.specialImage">
            </div>
            <!--选项卡  -->
            <div class="love_list" id="love_list">
                <ul class="btn_list">
                    <li v-for="(item,index) in activeName" :key="index" :class="{active:isActive[index]}" @click="activeLovefplist(index)">
                        {{item.title}}
                    </li>
                </ul>
                <div class="loveYuan">
                    <yd-icon name="love" custom slot="icon"></yd-icon>
                </div>
            </div>
        </div>        
        <!--本县概况简介 -->
        <yd-list theme="5" v-show="itemList==0">
            <div class="lovefplist_title" style="min-height:8rem" v-html="fptext.specialContent">
            </div>
        </yd-list>
        <!--本县爱心商品 -->
        <yd-infinitescroll :callback="loadList" ref="infinitescrollDemo" v-show="itemList!=0">
            <yd-list theme="3" slot="list">
                <yd-list-item :href="{name: 'commodity',query: {goodsCommonid: item.goodsCommonid}}" type="link" v-for="(item, key) in list" :key="key">
                    <img slot="img" style="width:100%;height:3.33rem" :src="imgUrl+item.goodsImage">
                    <span slot="title">{{item.goodsName}}</span>
                    <yd-list-other slot="other">
                        <div>
                            <span class="demo-list-price">
                                <em>¥</em>
                                <yd-countup :endnum="item.goodsPrice" duration="0.1" decimals="2" separator=","></yd-countup>
                            </span>
                        </div>
                    </yd-list-other>
                </yd-list-item>
            </yd-list>
            <!-- 数据全部加载完毕显示 -->
            <span slot="doneTip" style="display:block">
                <yd-button @click.native="lovefplistBtn" size="large" style="margin:0" type="hollow" color='#FA7471'>更多贫困县商品</yd-button>
            </span>
            <!-- 加载中提示，不指定，将显示默认加载中图标 -->
            <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg" />
        </yd-infinitescroll>
        <!--购物车  -->
        <div class="shopping" @click="shoppingCart">
            <yd-icon name="shopcart-outline" size='0.5rem'></yd-icon>
            <yd-badge class="badge" type="danger" v-if="shoppingNum>0">{{shoppingNum}}</yd-badge>
        </div>
        <!--点赞 留言  -->
        <!-- <div v-show="itemList==0"> -->
            <!-- <div>
                <yd-cell-group>
                    <yd-cell-item style="background: #f3f3f3;margin-top:20px">
                        <span slot="left" style="color:DodgerBlue" v-show="thumbsUpFlg == '0'" @click="thumbsUp(0)"><img src="../../assets/thumbs-o-up.png"></span>
                        <span slot="left" style="color:DodgerBlue" v-show="thumbsUpFlg == '1'" @click="thumbsUp(1)"><img src="../../assets/thumbs-up.png"></span>
                        <span slot="left" style="color:DodgerBlue">&nbsp;&nbsp;{{thumbsUpNum}}</span>
                        <span slot="right" class="fa fa-edit" style="color:DodgerBlue" @click="showLeaveMsg()">写留言</span>
                    </yd-cell-item>
                </yd-cell-group>
            </div> -->
            <!--写留言  -->
            <!-- <div v-if="leveMsgFlg == '1'">
                <div id="leaveMsg" contenteditable="true" class="input_text" placeholder="请写下您的留言"></div>
                <yd-cell-item style="height:0.8rem">
                   <span slot="left" style="margin-left:-25px;margin-top:10px"><img src="../../assets/0.png"  @click="makeFace()"> </span>
                </yd-cell-item>
                <div @click="choiceFace($event)" v-show="faceFlg == '1'" v-html="qqFace">
                </div>
                <div style="width:90%;margin:0 auto;">
                    <yd-button size="large" type="primary"  @click.native="saveLeaveMsg" >提交</yd-button>
                </div>
            </div>  -->
            <!--显示留言  -->
            <!-- <div v-else>
                <div v-for="(item,index) in specialCommentList" :key='index'>
                    <div>
                        <div class="msg_left">
                            <img src="../../assets/defUser.png">
                        </div>
                        <div class="msg_right" v-if="item.commentStatus == 1">
                            <yd-cell-item>
                                <span slot="left" style="color:gray">{{item.memberName}}</span>
                                <span slot="right" v-show="thumbcUpFlg[index] == '0'" @click="thumbcUp(item, index, 0)"><img src="../../assets/thumbs-o-up.png"></span>
                                <span slot="right" v-show="thumbcUpFlg[index] == '1'" @click="thumbcUp(item, index, 1)"><img src="../../assets/thumbs-up.png"></span>
                                <span slot="right" style="color:gray">&nbsp;&nbsp;{{item.commentUp}}</span>
                            </yd-cell-item>
                            <div style="margin-left:0.3rem;font-size:16px!important" v-html="item.commentMessage">                    
                            </div>
                            <yd-cell-item>
                                <span slot="left" style="color:gray">{{item.commentTime | formatDate}}</span>
                            </yd-cell-item>
                        </div>
                        <div class="msg_right" v-else>
                            <yd-cell-item>
                                <span slot="left" style="color:gray">{{item.memberName}}</span>
                            </yd-cell-item>
                            <div style="margin-left:0.3rem;font-size:16px!important">该评论已被管理员删除      
                            </div>
                            <yd-cell-item>
                                <span slot="left" style="color:gray">{{item.commentTime | formatDate}}</span>
                            </yd-cell-item>
                        </div>
                    </div>
                    <div style="height:3rem"></div>
                </div>  
            </div> -->
        <!-- </div> -->
    </div>
</template>
<script>
import moment from 'moment'

export default {
    name: 'lovefplist',
    data() {
        return {
            imgUrl: this.CONSTANT.imgBaseUrl,
            isActive: [true],
            activeName: [
                {
                    title: '本县概况简介'
                },
                {
                    title: '本县爱心商品'
                }
            ],
            itemList: 0,
            list: [],
            page: 1,
            pageSize: 10,
            loveBot: false,
            fptext: {},
            specialId: '',
            specialStoreId: '',
            shoppingNum: 0,
            thumbsUpFlg: 0,
            thumbsUpNum: 100,
            leveMsgFlg: '0',
            // leaveMsg: '',
            faceFlg: '0',
            qqFace: {},
            specialCommentList: [],
            thumbcUpFlg: [],
        }
    },
    filters: {
        formatDate(date) {
            if (date == undefined || date == '') {
                return "无";
            }
            return moment(date * 1000).format("YYYY-MM-DD HH:mm:ss");
        }
    },
    created: function() {
        this.specialId = this.$route.query.specialId;
        this.specialStoreId = this.$route.query.specialStoreId;
        this.$dialog.loading.open('请稍后');
        this.init();
        this.fptextList();
    },
    mounted: function() {
        this.$nextTick(() => {
            let loves = document.getElementById('love_list');
            let loveBox = document.getElementById('lovefplist');
            let tops = document.getElementById('love_list').offsetTop;
            document.getElementById('scrollView').onscroll = function(e) {
                let top = e.target.scrollTop;
                if (top >= tops) {
                    loves.classList.add("loveFixd");
                    loveBox.style.paddingTop = '1.2rem';
                } else {
                    loves.classList.remove("loveFixd");
                    loveBox.style.paddingTop = '0';
                }
            }
        })
    },
    methods: {
        activeLovefplist(index) {
            this.itemList = index;
            this.isActive = [];
            this.$set(this.isActive, index, true);
            if (index != 0) {
                this.loveBot = false;
                this.page = 1;
                this.list = [];
                this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
                this.init();
            }
            document.getElementById('scrollView').scrollTop = 0;
        },
        nums() {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'member/statistics')
                .then((response) => {
                    if (response.status == 200) {
                        this.shoppingNum = response.data.object.cartGoodsNum;
                    }
                })
        },
        shoppingCart() {
            this.$router.push('/shoppingCart');
        },
        init() {
            this.$axios.post(this.CONSTANT.wapiBaseUrl + 'goods/searchSupportGoods?p=' + this.page + '&pageSize=' + this.pageSize + '&storeId=' + this.specialStoreId)
                .then((response) => {
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        let _list = response.data.object;
                        this.list = [...this.list, ..._list];
                        if (_list.length < this.pageSize) {
                            /* 所有数据加载完毕 */
                            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                            return;
                        }
                        /* 单次请求数据完毕 */
                        this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
                        this.page++;
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        },
        loadList() {
            this.init();
        },
        fptextList() {
            this.$dialog.loading.open('请稍后');
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'supportPoor/view?id=' + this.specialId)
                .then((response) => {
                    this.nums();
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        this.fptext = response.data.object;

                        // 评论留言的取得
                        this.specialCommentList = response.data.object.specialCommentList;

                        // 数组清空
                        this.thumbsUpFlg = 0;
                        this.thumbcUpFlg =[];
                        for (var i = 0; i < response.data.object.specialCommentList.length; i++) {
                            this.thumbcUpFlg.push(0);
                        }

                        this.thumbsUpNum = response.data.object.thumbCount;
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        },
        lovefplistBtn() {
            this.$router.push('/lovelist');
        },
        thumbsUp(thumbsUpFlg) {
            if (thumbsUpFlg == 0) {
                this.thumbsUpFlg = 1;
                this.thumbsUpNum = this.thumbsUpNum + 1;
                this.updateThumbsUp(0, 0);
            } else {
                this.thumbsUpFlg = 0;
                this.thumbsUpNum = this.thumbsUpNum - 1;
                this.updateThumbsUp(1, 0);
            }
        },
        thumbcUp(item, index, thumbcUpFlg) {
            if (thumbcUpFlg == 0) {
                this.thumbcUpFlg[index] = 1;
                item.commentUp = item.commentUp + 1;
                this.updateThumbsUp(0, item.commentId);
            } else {
                this.thumbcUpFlg[index] = 0;
                item.commentUp = item.commentUp - 1;
                this.updateThumbsUp(1, item.commentId);
            }
        },
        showLeaveMsg() {
            if (this.leveMsgFlg == "0") {
                this.leveMsgFlg = "1";
            } else {
                this.leveMsgFlg = "0";
            }
        },
        makeFace() {
            let strHtml = "";
            if (this.faceFlg == "0") {
                if (this.qqFace != "") {
                    for(let i=1; i<=85; i++){
                        strHtml = strHtml + '<img src="static/qqImg/'+i+'.gif">';
                    }
                    this.qqFace = strHtml;
                }

                this.faceFlg = "1";
            } else {
                this.faceFlg = "0";
            }
        },
        choiceFace(e) {
            if(e.target.nodeName == "IMG"){
                var choice = e.target;
                 //深度复制，复制节点下面所有的子节点 ，直接将整个表情的IMG标签复制，并添加到发布框的<p></p>里面
                var cEle = choice.cloneNode(true);            
                let strHtml = document.getElementById('leaveMsg').innerHTML;
                let imgHtml = '<img style="vertical-align:middle" src="' + e.target.src + '">';
                document.getElementById('leaveMsg').innerHTML = strHtml + imgHtml;
            }
        },
        saveLeaveMsg() {
            let commentMessage = document.getElementById('leaveMsg').innerHTML;
            if (commentMessage == '') {
                this.$dialog.toast({
                    mes: '留言内容不可为空',
                    timeout: 1200
                });
                return false;
            }

            // parentCommentId =0 :对专题的留言；
            //  0以外的值是对指定的（CommentId = parentCommentId）留言的回复
            let specialComment = {
                specialId: this.fptext.specialId,
                parentCommentId: 0,
                commentMessage: commentMessage
            }

            this.$dialog.loading.open('请稍后');
            this.$httpAjax.post(this.CONSTANT.wapiBaseUrl + 'specialComment/addComment', specialComment)
                .then((response) => {
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        this.$dialog.toast({
                            mes: '保存成功',
                            icon: 'success',
                            timeout: 1200
                        });
                        setTimeout(() => {
                            // 不显示写留言
                            this.leveMsgFlg = "0";
                            // 重新检索
                            this.fptextList();
                        }, 600);
                    } else {
                        this.$dialog.toast({
                            mes: '保存失败，请稍后重试',
                            icon: 'error',
                            timeout: 1200
                        });
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        },
        updateThumbsUp(updateFlg, commentId) {
            // commentId =0 : 对专题的点赞； 0以外的值是对指定的留言点赞
            // parentCommentId =0 :对专题的点赞数量的修改
            // 0以外的值是对指定的（CommentId = parentCommentId）留言的点赞数量的修改
            let specialComment = {
                specialId: this.fptext.specialId,
                commentId: commentId,     
                parentCommentId: 0       
            }

            //  updateFlg = 0 : 点赞； 1：取消点赞   
            this.$dialog.loading.open('请稍后');
            if (updateFlg == 0) {
                this.$httpAjax.post(this.CONSTANT.wapiBaseUrl + 'specialComment/thumbsUp', specialComment)
                    .then((response) => {
                        this.$dialog.loading.close();
                        if (response.status == 200) {
                            // this.$dialog.toast({
                            //     mes: '保存成功',
                            //     icon: 'success',
                            //     timeout: 1200
                            // });
                            // setTimeout(() => {
                            //     // 重新检索
                            //     this.fptextList();
                            // }, 600);
                        } else {
                            this.$dialog.toast({
                                mes: '点赞失败，请稍后重试',
                                icon: 'error',
                                timeout: 1200
                            });
                        }
                    }).catch((error) => {
                        this.$dialog.loading.close();
                    });
            } else {
                this.$httpAjax.post(this.CONSTANT.wapiBaseUrl + 'specialComment/cancelThumbsUp', specialComment)
                    .then((response) => {
                        this.$dialog.loading.close();
                        if (response.status == 200) {
                            // this.$dialog.toast({
                            //     mes: '保存成功',
                            //     icon: 'success',
                            //     timeout: 1200
                            // });
                            // setTimeout(() => {
                            //     // 重新检索
                            //     this.fptextList();
                            // }, 600);
                        } else {
                            this.$dialog.toast({
                                mes: '取消点赞存失败，请稍后重试',
                                icon: 'error',
                                timeout: 1200
                            });
                        }
                    }).catch((error) => {
                        this.$dialog.loading.close();
                    });
            }
        }
    }
}
</script>
<style  scoped>
.shopping {
    position: fixed;
    right: 5%;
    bottom: 1rem;
    width: 1rem;
    z-index: 99;
    text-align: center;
    line-height: 1rem;
    color: #fff;
    font-weight: 400;
    height: 1rem;
    border-radius: 50%;
    background: #F4A9A3;
}

.badge {
    position: absolute;
    right: 0;
    top: -0.1rem;
}

.lovefplist_fiexd {
    /* position: fixed; */
    width: 100%;
    /* left: 0; */
    background: #f0f0f0;
    /* top: 0; */
    z-index: 9;
}

.lovefplist_title {
    font-size: 14px;
    text-align: justify;
    box-sizing: border-box;
    padding: .2rem .2rem 0;
    margin-bottom: 0.1rem;
    line-height: 0.4rem;
    color: #4a4a4a;
}

.lovefplist .demo-list-price {
    font-size: 14px;
    color: #c7000a;
}

.decoration-price {
    margin-left:12px;
    font-size:10px;
    color:#666;
    text-decoration:line-through;
}

.lovefplist .loveFixd {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9;
}
.lovefplist .demo-list-del-price {
    text-decoration: line-through;
}

.commodity_img {
    width: 100%;
    height: 2.2rem;
    overflow: hidden;
}

.commodity_img img {
    width: 100%;
    height: auto;
    display: block;
}

.love_list {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    z-index: 9;
    background: #fff;
    box-shadow: 0 3px 10px #bbb;
}

.btn_list {
    width: 80%;
    height: 0.8rem;
    font-size: 14px;
    line-height: 0.85rem;
    margin: 0.2rem auto;
    color: #B19E76;
    text-align: center;
    border-radius: 20px;
    overflow: hidden;
    background: #F2F2F2;
}

.btn_list li {
    width: 50%;
    height: 100%;
    float: left;
}

.btn_list li.active {
    color: #fff;
    background: #B19E76;
}

.loveYuan {
    background: #fff;
    width: 0.8rem;
    position: absolute;
    left: 50%;
    text-align: center;
    line-height: 0.8rem;
    top: 0.2rem;
    color: #B19E76;
    margin-left: -0.4rem;
    height: 0.8rem;
    border-radius: 50%;
    overflow: hidden;
}

.input_text {
    background: #fff;
    width: 94%;
    margin:0 auto;
    min-height: 2.2rem;
    max-height: 3.8rem;		    
    overflow-y: auto;
    font-size:16px!important
}
.input_text:empty:before{
    content:attr(placeholder);
    font-size: 16px;
    color: gray;
}
.input_text:focus{
    content:none;
}

.msg_left {
    width: 1.0rem;
    float: left;
    /* margin: 0.2rem 0.1rem; */
    height: 0.9rem;
    overflow: hidden;
    background: #cbcbcb;
    position: relative;
    border-radius: 50%;
}

.msg_left img {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100%; 
}

.msg_right {
    float: left;
    width: calc(100% - 14%);
    height: 100%;
    overflow: hidden;
    /* background: #cbcbcb; */
}
</style>
<style>
#app .lovefplist .yd-list-img {
    min-height: 2.2rem;
    padding-bottom: 0!important;
}

.lovefplist .lovefplist_title img {
    display: block;
    width: 100%!important;
    height: auto!important;
    margin-top: 10px;
}
</style>